<!DOCTYPE html>



  


<html class="theme-next muse use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT">





  <link rel="alternate" href="/atom.xml" title="renhao" type="application/atom+xml">






<meta name="description" content="本文根据教程总结对css3新特性进行总结回顾。">
<meta property="og:type" content="article">
<meta property="og:title" content="css3新特性与动画">
<meta property="og:url" content="https://huangrenhao.gitee.io/2019/10/07/css3-new/index.html">
<meta property="og:site_name" content="renhao">
<meta property="og:description" content="本文根据教程总结对css3新特性进行总结回顾。">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://huangrenhao.gitee.io/2019/10/07/css3-new/steps.png">
<meta property="og:image" content="https://huangrenhao.gitee.io/2019/10/07/css3-new/perspective.png">
<meta property="og:image" content="https://huangrenhao.gitee.io/2019/10/07/css3-new/perspective-origin.png">
<meta property="og:image" content="https://huangrenhao.gitee.io/2019/10/07/css3-new/css3-selector.png">
<meta property="og:image" content="https://huangrenhao.gitee.io/2019/10/07/css3-new/unilateral-uneven-shadow.png">
<meta property="og:image" content="https://huangrenhao.gitee.io/2019/10/07/css3-new/border-radius-example.png">
<meta property="og:image" content="https://huangrenhao.gitee.io/2019/10/07/css3-new/background-repeat-example.png">
<meta property="og:image" content="https://huangrenhao.gitee.io/2019/10/07/css3-new/background-repeat-space-round-example.png">
<meta property="og:image" content="https://huangrenhao.gitee.io/2019/10/07/css3-new/background-attachment-example.png">
<meta property="og:image" content="https://huangrenhao.gitee.io/2019/10/07/css3-new/background-border-example.png">
<meta property="og:updated_time" content="2020-09-03T08:50:36.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="css3新特性与动画">
<meta name="twitter:description" content="本文根据教程总结对css3新特性进行总结回顾。">
<meta name="twitter:image" content="https://huangrenhao.gitee.io/2019/10/07/css3-new/steps.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Muse',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://huangrenhao.gitee.io/2019/10/07/css3-new/">





  <title>css3新特性与动画 | renhao</title>
  








<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css"></head>

<body itemscope="" itemtype="http://schema.org/WebPage" lang="zh-Hans">
  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope="" itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">renhao</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope="" itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://huangrenhao.gitee.io/2019/10/07/css3-new/">

    <span hidden itemprop="author" itemscope="" itemtype="http://schema.org/Person">
      <meta itemprop="name" content="renhao">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="renhao">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">css3新特性与动画</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2019-10-07T11:33:28+08:00">
                2019-10-07
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope="" itemtype="http://schema.org/Thing">
                  <a href="/categories/css/" itemprop="url" rel="index">
                    <span itemprop="name">css</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2019/10/07/css3-new/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count valine-comment-count" data-xid="/2019/10/07/css3-new/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  5.8k
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  22
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>本文根据教程总结对css3新特性进行总结回顾。<a id="more"></a>原文详见<a href="https://juejin.im/post/5a0c184c51882531926e4294" target="_blank" rel="noopener">个人总结（css新特性）</a>、<a href="https://github.com/AlloyTeam/Mars/blob/master/performance/high-performance-css3-animation.md" target="_blank" rel="noopener">高性能css3动画</a>、、</p>
<h3 id="过渡"><a href="#过渡" class="headerlink" title="过渡"></a>过渡</h3><blockquote>
<p>菜鸟教程中的过渡：CSS3过渡是元素从一种样式逐渐改变成另一种的效果。参考<a href="https://www.jianshu.com/p/56f8ddafc63f" target="_blank" rel="noopener">transition介绍</a></p>
</blockquote>
<p>语法：<code>transition</code>后<strong>依次</strong>指定CSS属性、花费时间、效果曲线（默认ease）、延迟时间（默认0）。四个子属性：</p>
<ul>
<li><p><code>transition-property</code>：指定需要过渡的CSS属性（只有能数字量化的CSS属性才能过渡），除单个指定属性外还能设置为<code>all</code>（表示所有属性都将获得过渡效果），属于数字量化的CSS属性有：</p>
<ul>
<li>颜色系：<code>color,background-color,border-color,outline-color</code>等</li>
<li>数字系：<code>width,height,top,bottom,left,zoom,opacity,line-height,background-position,word-spacing,font-weight,vertical-align,outline-outset,z-index</code>等。</li>
<li>01系：如<code>visibility</code>（0表示隐藏，1表示显示）</li>
</ul>
<p>W3C可过渡属性一览表<a href="https://www.w3.org/TR/css-transitions-1/" target="_blank" rel="noopener">Properties from CSS</a></p>
</li>
<li><p><code>transition-duration</code>：过渡所需要的时间（默认值为0，立刻变化）</p>
</li>
<li><p><code>transition-timing-function</code>：过渡函数，有<code>linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n),steps</code>（都是贝塞尔曲线）。<code>linear</code>即匀速过渡，<code>ease</code>先快再慢，<code>ease-in</code>加速冲刺，<code>ease-out</code>减速到停止，<code>ease-in-out</code>先加速后减速，<code>cubic-bezier(n,n,n,n)</code>自定义平滑曲线，可以使用<a href="[https://cubic-bezier.com](https://cubic-bezier.com/">贝塞尔立方</a>)自动生成想要效果的代码。<code>steps</code>函数有两个参数，第一个是分割的数量，第二个参数可选，关键字为<code>start</code>、<code>end</code>（默认为<code>end</code>），<code>steps</code>实现的并不是平滑过渡，而是将过渡过程分成若干步，每一步瞬间完成过渡，见下图：</p>
<p><img src="/2019/10/07/css3-new/steps.png" alt="steps"></p>
</li>
<li><p><code>transition-delay</code>：用来延迟开始过渡的时间（默认为0，表示不延迟，立即开始过渡动作），允许设置负时间，从该时间点开始启动，之前的过渡动作不显示（例如-2s则前两秒的过渡被跳过）。</p>
</li>
</ul>
<p>触发过渡方式：</p>
<ul>
<li>常见的就是伪类触发，如<code>:hover,:focus,:active,:checked</code>等；</li>
<li>还有例如<code>@media</code>媒体查询，根据设备大小、横屏竖屏切换时触发；</li>
<li>还有如<code>click</code>、<code>keydown</code>等JS事件触发</li>
<li>页面加载</li>
</ul>
<p>隐式过渡：过渡的CSS属性设置成<code>em,rem,vh,vw</code>等形式（根据另一个属性的值计算得到它的值），如果其依赖属性发生了变化也会触发过渡（隐式过渡）。</p>
<p>开关过渡和永久过渡：开关过渡就是触发源的时间结束后会恢复到原始状态，永久过渡就是过渡后不恢复到原始状态。</p>
<pre><code>//开关过渡
.transition { 
    transition: all 1s ease-in-out;
}
.transition:hover {
    transform: scale(1.5);
}
//永久过渡
.forever { 
    // 999999s约等于12天，理论上页面需要12天后才能看到关闭过渡效果，基本上等同于永久过渡
    transition: all 1s ease-in-out 999999s; 
}
.forever:hover { 
    transform: scale(1.5);
    transition: all 1s ease-in-out;
}
</code></pre><p>auto过渡：将定值过渡到<code>auto</code>，在这里实现方式是采用JS通过<code>getComputedStyle</code>获取<code>auto</code>的固定值然后通过style设置该值，再次触发css的过渡效果。</p>
<h3 id="动画"><a href="#动画" class="headerlink" title="动画"></a>动画</h3><blockquote>
<p>参考<a href="https://www.jianshu.com/p/ed11f8c26992" target="_blank" rel="noopener">animation介绍</a></p>
</blockquote>
<p>语法：<code>animation</code>后<strong>依次</strong>指定动画名称（即keyframes规则名称）、一个周期花费时间、运动曲线（默认ease）、动画延迟（默认0）、播放次数（默认1）、是否反向播放动画（默认normal）、是否暂停动画（默认running）。</p>
<p>子属性：</p>
<ul>
<li><code>animation-name</code>：指定<code>@keyframes</code>的名字，CSS加载时会应用该名字的<code>@keyframes</code>规则来实现动画。</li>
<li><code>animation-duration</code>：动画持续时间（默认0表示无动画）</li>
<li><code>animation-timing-function</code>：动画播放方式，有<code>linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n),steps</code>（默认为<code>ease</code>），具体效果和<code>transition</code>相同。</li>
<li><code>animation-delay</code>：延迟动画开始时间（默认0不延迟，立即播放动画），允许设置负时间（动画从该时间点开始启动，之前的动画不显示，如-2s是动画马上开始但前两秒的动画被跳过）。</li>
<li><code>animation-iteration-count</code>：动画循环播放的次数（默认为1），除数字外也可设置关键字<code>infinite</code>表示无限循环播放。</li>
<li><code>animation-direction</code>：动画播放的方向，可设<code>normal,alternate,alternate-reverse</code>（默认为normal）。<code>alternate</code>表示轮转正反向播放动画，动画会在奇数次（1、3、5…）正常播放，偶数次（2、4、6…）反向播放；<code>alternate-reverse</code>正好反过来，奇数次反向播放动画，偶数次正向播放。</li>
<li><code>animation-fill-mode</code>：动画的时间外属性，可设<code>none,forwards,backwards,both</code>，默认值<code>none</code>表示动画播放完成后恢复到初始状态。<code>forwards</code>当动画播放完后，保持<code>@keyframes</code>里最后一帧的属性。<code>backwards</code>表示开始播动画时，应用<code>@keyframes</code>里第一帧的属性（要看出效果通常需要设置<code>animation-delay</code>）。<code>both</code>表示<code>forwards</code>和<code>backforwards</code>都应用。</li>
<li><code>animation-play-state</code>：动画的状态，可设<code>running,paused</code>，默认<code>running</code>表示正在播放动画，<code>pause</code>表示暂停动画（通常在js中通过<code>object.style.animationPlayState=&quot;pause&quot;</code>来暂停动画。</li>
</ul>
<p><code>@keyframes</code>动画帧：区分animation与transition的关键，transition中无法更细致地控制时间段内执行的动作，animation中用<code>@keyframes</code>可以细致地指定各个帧的动作行为。语法：由<code>@keyframes</code>开头，后接<code>animation-name</code>，实体中可以创建%来划分时间段，或者关键字<code>from</code>（0%）、<code>to</code>（100%）。</p>
<p>精密动画效果：<a href="https://daneden.github.io/animate.css/?" target="_blank" rel="noopener">animate.css</a></p>
<p>浏览器全适应：需要加上<code>-ms</code>、<code>-o</code>等前缀，分开指定下代码清晰但需要加上前缀代码变多，合并情况下代码少一点。</p>
<h3 id="形状转换"><a href="#形状转换" class="headerlink" title="形状转换"></a>形状转换</h3><blockquote>
<p>参考<a href="https://www.jianshu.com/p/17e289fcf467" target="_blank" rel="noopener">transform介绍</a></p>
</blockquote>
<p>语法：<code>transform</code>本质上是一系列变形函数，分别是<code>translate</code>位移、<code>scale</code>缩放、<code>rotate</code>旋转、<code>skew</code>扭曲、<code>matrix</code>矩阵。</p>
<ul>
<li><p>前置属性：</p>
<ul>
<li><p><code>transform-origin</code>：指定元素变形的中心点（默认为元素的正中心，即xyz轴的50% 50% 0处），表示二维的<code>x-offset/y-offset</code>可以设<code>px</code>或<code>%</code>或者<code>top</code>（50% 0%）、<code>right</code>（100% 50%）、<code>bottom</code>（50% 100%）、<code>left</code>（0% 50%）、<code>center</code>（50% 50%）等，表示三维的<code>z-offset</code>只能设<code>px</code>值。</p>
</li>
<li><p><code>transform-style</code>：用于指定舞台为2D或3D，取值<code>flat</code>（默认2D舞台）或<code>preserve-3d</code>。要在变形元素的父元素上设置该属性（设定后所有子元素共享该舞台），在变形元素自身上设置该属性无效。如果同时设置<code>transform-style:preserve-3d</code>和<code>overflow:hidden</code>（bfc，flatten everything）后等价于<code>transform-style:flat</code>。</p>
</li>
<li><p><code>perspective</code>：指定3D的视距，默认值为<code>none</code>（2D扁平化，无3D效果），只能设<code>px</code>值（越小表示用户眼睛距离屏幕越近）。在变形元素上指定的<code>perspective</code>只针对当前变形元素，需要和<code>tranform</code>其他函数一起使用仅表示当前元素的视距，在变形元素的父元素上指定的<code>perspective</code>属性指定3D舞台的视距（里面的子元素共享这个视距）。如下图<code>d</code>就是perspective视距，Z是translateZ的位移，Z轴正向位移3D舞台将放大反之则缩小。</p>
<p><img src="/2019/10/07/css3-new/perspective.png" alt="perspective视距"></p>
</li>
<li><p><code>perspective-origin</code>：设置视距的基点（默认为50% 50%即center，表示视距基点在中心点），同样应该定义在父元素上适用于整个3D舞台。如下图基点已经发生了位移（眼睛已经不再舞台正中心）。</p>
<p><img src="/2019/10/07/css3-new/perspective-origin.png" alt="视距基点"></p>
</li>
<li><p><code>backface-visibility</code>：表示是否可以看见3D舞台背面（默认为visible表示背面可见），可用于3D旋转时背面是否显示。</p>
</li>
</ul>
</li>
<li><p>2D变形：</p>
<ul>
<li><code>translate</code>位移：用于2D的有<code>translate</code>、<code>translateX</code>、<code>translateY</code>。<code>translate</code>可设单值（表示只X轴位移，Y轴坐标不变）也可设双值（推荐）。</li>
<li><code>scale</code>缩放：用于2D的有<code>scale</code>、<code>scaleX</code>、<code>scaleY</code>。<code>scale</code>同样可设单值（表示X轴和Y轴等值缩放，默认值为1）也可设双值。可设置负数（会将元素反转后缩放）。</li>
<li><code>rotate</code>旋转：用于2D的只有<code>rotate</code>，只能设单值，正数表示顺时针旋转，负数表示逆时针旋转。</li>
<li><code>skew</code>扭曲：用于2D的有<code>skew</code>、<code>skewX</code>、<code>skewY</code>。<code>skew</code>扭曲可设单值（表示只X轴扭曲，Y轴不变）也可设双值。</li>
</ul>
</li>
<li><p>3D变形：</p>
<ul>
<li><code>translate3d</code>位移：用于3D的有<code>translate3d</code>、<code>translateZ</code>。<code>translate3d(tx,ty,tz)</code>其中tz的Z轴长度只能为px值不能为%值。<code>translateZ</code>等价于<code>translate3d(0,0,tz)</code>，z轴的值越大表示离眼睛越近（元素越大），当值大于<code>perspective</code>视距时元素将会消失。实际使用中<code>translateZ</code>与2D中的<code>scale</code>缩放效果类似但是<code>translateZ</code>是Z轴上的位移而<code>scale</code>是XY轴的缩放。</li>
<li><code>scale3d</code>缩放：用于3D的有<code>scale3d</code>、<code>scaleZ</code>。<code>scale3d(sx,sy,sz)</code>中<code>sz</code>是Z轴的缩放比例，<code>scaleZ</code>等价于<code>scale(1,1,sz)</code>。单独使用<code>scale3d</code>或<code>scaleZ</code>不会有效果（需要配合其他属性从而定义Z轴缩放比例）。</li>
<li><code>rotate3d</code>旋转：用于3D的有<code>rotate3d</code>、<code>rotateX</code>、<code>rotateY</code>、<code>rotateZ</code>。<code>roate3d(x,y,z,a)</code>中的<code>a</code>表示3D舞台上旋转的角度，<code>xyz</code>取值为0~1（各轴的旋转矢量值）。</li>
</ul>
</li>
<li><p><code>matrix/matrix3d</code>矩阵：所有2D和3D变形的本质，一系列变形函数（transform内置函数）的本质都是matrix矩阵运算。</p>
</li>
</ul>
<table>
<thead>
<tr>
<th>transform</th>
<th>matrix</th>
</tr>
</thead>
<tbody>
<tr>
<td>translate(tx, ty);</td>
<td>matrix(1, 0, 0, 1, tx, ty)</td>
</tr>
<tr>
<td>scale(sx, sy);</td>
<td>matrix(sx, 0, 0, sy, 0, 0)</td>
</tr>
<tr>
<td>rotate(a);</td>
<td>matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0)</td>
</tr>
<tr>
<td>skew(ax, ay);</td>
<td>matrix(1, tan(ay), tan(ax), 1, 0, 0)</td>
</tr>
<tr>
<td>translate3d(tx,ty,tz)</td>
<td>matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,tx,ty,tz,1)</td>
</tr>
<tr>
<td>scale3d(sx,sy,sz)</td>
<td>matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1)</td>
</tr>
</tbody>
</table>
<p><code>transform</code>与<code>absolute</code>、<code>relative</code>、<code>fixed</code>属于同一层级。</p>
<h3 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h3><p><a href="https://www.w3school.com.cn/cssref/css_selectors.asp" target="_blank" rel="noopener">CSS3选择器W3C</a></p>
<p><img src="/2019/10/07/css3-new/css3-selector.png" width="90%"></p>
<h3 id="阴影"><a href="#阴影" class="headerlink" title="阴影"></a>阴影</h3><ol>
<li><p>盒子阴影<code>box-shadow</code></p>
<blockquote>
<p>参考<a href="https://www.jianshu.com/p/1303b96661b9" target="_blank" rel="noopener">css3 box-shadow介绍</a></p>
</blockquote>
<p>基本参数：</p>
<ul>
<li><code>none</code>：默认值，无阴影。</li>
<li><code>inset</code>：内阴影（可选，默认为外阴影）</li>
<li><code>x-offset/y-offset</code>：水平/垂直阴影的偏移量（必须），正值表示往x轴y轴正方向便宜（往右往下），负值表示往x轴y轴负方向偏移（往左往上）。单边阴影将其中一个值设置为0即可。</li>
<li><code>blur-radius</code>：阴影模糊半径（可选，默认为0表示不模糊），值越大阴影边缘越模糊，不能为负值。</li>
<li><code>spread-radius</code>：阴影扩展半径（可选），正值表示阴影扩展，负值表示阴影缩小。</li>
<li><code>color</code>：阴影颜色（可选，默认为浏览器的默认色）。</li>
</ul>
<p>完整语法：<code>box-shadow:[inset x-offset y-offset blur-radius spread-radius color]+</code>，<code>+</code>为正则表达式形式表示可以设置多个阴影。当<code>spread-radius</code>的负值和<code>blur-radius</code>的值相等时阴影会消失。只有<code>spread-radius</code>而<code>blur-radius</code>为0效果相当于<code>border</code>但盒子模型计算宽高不会被计算在内（如果是<code>border</code>则会）。</p>
<p><code>box-shadow</code>的层级关系从高到低依次是<code>border&gt;内阴影&gt;background-image&gt;background-color&gt;外阴影</code>。</p>
<p>单边不均匀阴影需要配合图层覆盖和部分动画，如下图所示效果是结合了<code>::before</code>,<code>::after</code>伪元素实现。</p>
<p><img src="/2019/10/07/css3-new/unilateral-uneven-shadow.png" alt="单边非均匀阴影"></p>
<pre><code>body {
    background: #eee;
}
.box {
    width:200px;
    height:100px;
    background:#FFF;
    margin:10px;
    line-height:100px; 
    text-align:center;
    position: relative;  /*为下面absolute定位做准备*/
}
.effect::before, .effect::after {
    content: &quot;&quot;;
    width: 50%;
    position: absolute;
    left: 10px;
    top: 80%;
    bottom: 15px;
    transform: rotate(-5deg); /*旋转*/
    box-shadow: 0 15px 10px #777; /*阴影*/
    z-index: -1;
}
.effect::after {
    transform: rotate(5deg); /*旋转*/
    right: 10px;
    left: auto;
}
&lt;div class=&quot;box effect&quot;&gt;final&lt;/div&gt;
</code></pre></li>
<li><p>文本阴影<code>text-shadow</code></p>
<blockquote>
<p>参考<a href="https://www.jianshu.com/p/e4a7dbb21f7c" target="_blank" rel="noopener">css3 text-shadow介绍</a></p>
</blockquote>
<p>基本参数：</p>
<ul>
<li><code>x-offset/y-offset</code>：水平/垂直阴影的偏移量（必须参数），正值表示往x轴y轴正方向偏移（往右往下），负值即往x轴y轴反方向偏移（往左往上）。</li>
<li><code>blur-radius</code>：阴影模糊半径（可选，默认为0表示不模糊），值越大阴影的边缘就越模糊，不能为负值。</li>
<li><code>color</code>：阴影颜色（可选，默认为浏览器的默认色）。</li>
</ul>
<p>完整语法：<code>text-shadow:[x-offset y-offset blur-radius color]+</code>，<code>+</code>正则表达式表示可以设多个阴影，可以看到参数是<code>box-shadow</code>的子集</p>
</li>
</ol>
<h3 id="边框"><a href="#边框" class="headerlink" title="边框"></a>边框</h3><ol>
<li><p>边框图片</p>
<blockquote>
<p>参考<a href="https://www.jianshu.com/p/c23bdf74e540" target="_blank" rel="noopener">CSS3 border-image介绍</a></p>
</blockquote>
<p>基本语法：<code>border-image</code>：url 剪裁位置 显示方式</p>
<ul>
<li>url ： 可以使用绝对或相对路径加载边框图片。</li>
<li>剪裁位置：可使用TRBL原则（top-right-bottom-left），单位不指定默认为px，经剪裁后图片会变为9宫格9个部分（上左，上中，上右，中左，中中，中右，下左，下中，下右），其中最中心的部分（中中）不会被显示出来（被丢弃），能显示的就是9宫格周围的那一圈。</li>
<li>显示方式： <code>stretch</code>拉伸（默认值）、<code>repeat</code>重复、<code>round</code>平铺。对9宫格中上中和下中设置水平显示方式，对中左和中右设置垂直显示方式。<code>repeat</code>重复就是保留9宫格部分的原始尺寸，居中开始往两边无脑重复（不会更改被重复的元素的大小，而会对其进行裁剪以适应9宫格的大小），<code>round</code>平铺可能会改变被重复元素的大小来适应9宫格的大小。</li>
</ul>
</li>
<li><p>边框圆角</p>
<blockquote>
<p>参考<a href="https://www.jianshu.com/p/ca82b9ba9107" target="_blank" rel="noopener">CSS3 border-radius介绍</a></p>
</blockquote>
<p>基本语法：例如<code>border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px</code>，<code>/</code>前的为水平方向圆角半径，<code>/</code>后的为垂直方向圆角半径，没有<code>/</code>表示水平方向的圆角半径同垂直方向的圆角半径的值相等（如果设的是<code>px</code>表示水平和垂直半径是相等的，设的是<code>%</code>说明水平方向和垂直方向的圆角半径有相同的缩放比例但px值不一定相等）。顺序同样遵循TRBL原则（三个值代表上左，上右和下左，下右）。</p>
<p><img src="/2019/10/07/css3-new/border-radius-example.png" alt="示例"></p>
<p>圆角的内半径和外半径：我们所设的<code>border-radius</code>的值是外半径（即width/height+border的宽度），内半径=外半径-border宽度（border-radius的值小于或等于border宽度时边框内部将不具有圆角效果）。</p>
<p>圆角边框过渡：当相邻两边框宽度不同时圆角会从宽的一边平滑过渡到窄的一边，边框交接中心点在两边宽度成正比的角度上。<code>border-radius:50%</code>（圆形）四个圆角弧线无任何重叠，<code>border-radius:100%</code>也是圆形的原因是当两个圆角半径的和超过border box的大小会使两个圆角部分重叠，浏览器为避免这种重叠会按圆角的水平和垂直半径的比例进行缩小（即此时浏览器会将其缩小到50%）。如果长宽指定并且border-radius设定值超过长宽中的最大值，会以较小值为基准按比例进行缩小（让圆角弧线无重叠）。</p>
</li>
</ol>
<h3 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h3><p>CSS3之前主要有<code>background-color</code>、<code>background-image</code>、<code>background-repeat</code>、<code>background-attachment</code>、<code>background-position</code>，CSS3增加了三个属性<code>background-origin</code>、<code>background-clip</code>、<code>background-size</code>。</p>
<blockquote>
<p>参考<a href="https://www.jianshu.com/p/0579f9fe5aeb" target="_blank" rel="noopener">CSS3 background介绍</a></p>
</blockquote>
<ul>
<li><p><code>background-color</code>：背景色，默认值transparent</p>
</li>
<li><p><code>background-image</code>：背景图，默认值none，可使用URL指定图片地址（绝对地址或相对地址）</p>
</li>
<li><p><code>background-repeat</code>：<code>no-repeat</code>、<code>repeat-x</code>、<code>repeat-y</code>、<code>repeat</code>。默认值repeat，效果如下图所示。</p>
<p><img src="/2019/10/07/css3-new/background-repeat-example.png" alt="repeat"></p>
<p>从左到右依次是背景图的原始尺寸、水平重复、垂直重复、全方位重复。需要注意的是背景图是起始于盒子模型中padding-box的左上角而不是content区域的左上角（即若设置了padding则padding区域也会被背景图覆盖），重复都是正向反向两端重复，如上图<code>repeat-x</code>也会向左重复（左边框底部也有图片），<code>repeat-y</code>也会向上重复。</p>
<p>CSS3中允许设两个值，分别表示水平和垂直的重复，作用是为了实现水平/垂直单向space或round效果（CSS3新增两个属性space、round）。space表示两端平铺同时保留背景图原始尺寸，round表示两端对齐但会适当拉伸背景图。实例：<code>background-repeat: space no-repeat</code>水平两端平铺，垂直不重复，如下左图所示。、<code>background-repeat:round no-repeat</code>水平两端对齐，垂直不重复，round会拉伸图片以实现两端对齐（而repeat-x在保持背景图原始尺寸下重复），如下右图所示。space、round使用单值的情况下就是水平垂直方向都重复。</p>
<p><img src="/2019/10/07/css3-new/background-repeat-space-round-example.png" width="50%" height="80%"></p>
</li>
<li><p><code>background-attachment</code>：<code>scroll</code>（默认值）、<code>fixed</code>、<code>local</code>。<code>scroll</code>和<code>fixed</code>表示背景图是否随<strong>页面</strong>滚动或固定，通常<code>fixed</code>用于html或body上。<code>local</code>为CSS3中新增，当有滚动条时可以让背景随元素内容滚动（有滚动条时背景相对于元素内容固定）。实例（这个实例比较实用且我没做过）：在ul的顶部设一个阴影背景提示用户到顶了，当用户滚动滚动条时顶部阴影消失（即滚动条在顶部时出现阴影，不在顶部时阴影消失）。</p>
<p><img src="/2019/10/07/css3-new/background-attachment-example.png" width="40%" height="50%"></p>
<pre><code>ul {
    width: 5em;
    height: 7em;
    border: 1px solid silver;
    padding: .3em .5em;
    overflow: auto;
    background: radial-gradient(at top, rgba(0,0,0,.3), transparent 70%);
    background-repeat: no-repeat;
    background-size: 100% 10px;
    background-attachment: local;
}
</code></pre><blockquote>
<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/image" target="_blank" rel="noopener"><code>&lt;image&gt;</code></a>：CSS的<code>&lt;image&gt;</code>数据类型描述的是2D图形。CSS中有两种类型的图像：</p>
<ul>
<li>简单的静态图像（经常使用url引用）</li>
<li>动态生成的图像，比如DOM树的部分元素样式渐变或者计算样式产生。</li>
</ul>
<p>有效的图像引用值（通常只有这三种）：</p>
<pre><code>url(test.jpg)                          // url()方法, 只要test.jpg是图像文件
linear-gradient(to bottom, blue, red)  // 一个 &lt;gradient&gt;标签
element(#colonne3)                     // 页面的一部分, 使用了element()方法,如果 colonne3 是存在于页面中的一个元素id即可
</code></pre><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient" target="_blank" rel="noopener"><code>&lt;gradient&gt;</code></a>：CSS数据类型<code>&lt;image&gt;</code>的子类型，用于表现两种或多种颜色的过渡转变。<code>&lt;gradient&gt;</code>数据类型可以由下列函数定义：</p>
<ul>
<li><p>线性渐变<code>linear-gradient()</code>：颜色值沿着一条隐式的直线逐渐过渡。</p>
<p>语法：<code>background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);</code></p>
<ul>
<li>angle：定义渐变的角度方向，角度指水平线和渐变线之间的角度，逆时针方向计算。<code>0deg</code>将创建一个从下到上的渐变，<code>90deg</code>将创建一个从左到右的渐变，默认为180度（可选）。</li>
<li>side-or-corner：指定线性渐变的起始位置。由两个关键字组成：第一个为指定水平位置(left 或 right)，第二个为指定垂直位置（top 或bottom）。 顺序是随意的，默认为从上到下，每个关键字都是可选的。</li>
<li>color-stop1,color-stop2,…：指定渐变的起止颜色，由颜色值、停止位置（可选，使用百分比指定）组成。</li>
</ul>
</li>
<li><p>径向渐变<code>radial-gradient()</code>：颜色值由一个中心点（原点）向外扩散并逐渐过渡到其他的颜色值。</p>
<p>语法：<code>background-image: radial-gradient(shape size at position, start-color, ..., last-color);</code></p>
<ul>
<li>shape：确定圆的类型（可省略），<code>ellipse</code>（默认）、<code>circle</code>。<code>ellipse</code>指定椭圆形径向渐变，<code>circle</code>指定圆形径向渐变</li>
<li>size：定义渐变大小（可省略），<code>farthest-corner</code>（默认）、<code>closest-side</code>、<code>closest-corner</code>、<code>farthest-side</code>。<code>farthest-corner</code>指定径向渐变的半径长度为从圆心到离圆心最远的角，<code>closest-side</code>指定径向渐变的半径长度为从圆心到离圆心最近的边，<code>closest-corner</code>指定径向渐变的半径长度为从圆心到离圆心最近的角，<code>farthest-side</code>指定径向渐变的半径长度为从圆心到离圆心最远的边。</li>
<li>position：定义渐变的位置（可省略），<code>center</code>（默认）、<code>top</code>、<code>bottom</code>。<code>center</code>设置中间为径向渐变圆心的纵坐标值，<code>top</code>设置顶部为径向渐变圆心的纵坐标值，<code>bottom</code>设置底部为径向渐变圆心的纵坐标值。</li>
<li>start-color,…,last-color：用于指定渐变的起止颜色（必须）</li>
</ul>
</li>
<li><p>重复渐变<code>repeating-linear-gradient()</code>和<code>repeating-radial-gradient()</code>：重复多次渐变图案直到足够填满指定元素</p>
<p>语法：同上述两种对应相同。</p>
</li>
</ul>
</blockquote>
</li>
<li><p><code>background-position</code>：背景图水平和垂直起点位置，默认为<code>0% 0%</code>（即起点在padding-box的左上角，可通过<code>background-origin</code>更改），可设百分比或px值，正值向正向（以左上角为起点，向右向下为正方向，向左向上是反方向）偏移，可以被定义为两个值或一个值，两个值中第一个值代表水平位置，第二个代表垂直位置；只指定一个值第二个值默认为<code>center</code>。关键词<code>center</code>用来居中背景图片，关键词<code>top</code>、<code>left</code>、<code>bottom</code>、<code>right</code>用来把图片放在哪一个边缘（如果一个值是<code>top</code>或<code>bottom</code>，则另一个值不应该是<code>top</code>或<code>bottom</code>；如果一个值是<code>left</code>或<code>right</code>则另一个值不应该是<code>left</code>或<code>right</code>）。CSS3中将两值扩展为四值，前两个代表水平方向，后两个代表垂直方向。</p>
</li>
<li><p><code>background-origin</code>：决定背景图片原点在盒子模型的位置。<code>padding-box</code>（默认）、<code>content-box</code>、<code>border-box</code>，<code>padding-box</code>表示背景图原点在<code>content+padding</code>区域，<code>content-box</code>表示背景图原点在<code>content</code>区域，<code>border-box</code>表示背景图原点在<code>content+padding+border</code>区域。</p>
</li>
<li><p><code>background-clip</code>：背景裁剪区域。<code>border-box</code>（默认）、<code>padding-box</code>、<code>content-box</code>。<code>background-origin</code>确定背景图片的原点起始位置，<code>background-clip</code>指背景剪裁区域（将区域外的所有背景相关内容包括背景色和超出部分的背景图片剪裁掉）。</p>
</li>
<li><p><code>background-size</code>：控制背景图片的大小。<code>auto</code>（默认）、<code>contain</code>、<code>cover</code>，此外还可设为百分比值或px值。有两个值，分别表示宽度和高度，如果只设一个值时第二个值将为<code>auto</code>（表示保持原始宽高比例），<code>cover</code>将按比例缩放图片来充满整个背景区域，可能会造成图片扭曲或截断，多用于背景图片比容器小的情况。<code>contain</code>将在保持原图比例的前提下缩放图片尽量填充背景区域（可能不会填充满整个背景区域而是只填充满其中的某一条边），多用于背景图片比容器大的情况。</p>
</li>
</ul>
<p>background的各种属性可以单独指定，也可以合并到一起指定（CSS3新增的三个属性需要单独指定），未指定的属性将被设置为默认值。</p>
<p>多背景属性：CSS3之前每个容器只能指定一张背景图片，CSS3开始可以直接在容器上指定多张图片，指定多张图片时只有<code>background-color</code>属性无法指定多个（该属性隶属于容器而非背景图片）。格式如下：</p>
<pre><code>background-image: url(bg.png), url(bg50.png), url(bgheader.jpg);
background-repeat: repeat-x, repeat-y, no-repeat;
background-attachment: scroll, scroll, scroll;
background-position: center, right 10px bottom 10px, left top; 
background-origin: content-box, padding-box, border-box;
background-clip: border-box, padding-box, content-box;
background-size: auto, 50% auto, 50% 50%;
</code></pre><p>实例（比较新奇）：</p>
<p><img src="/2019/10/07/css3-new/background-border-example.png" width="60%" height="80%"></p>
<pre><code>.borderImage {
    border: 1em solid transparent;
    background: linear-gradient(white, white),
                url(stone-art.jpg);
    background-size: cover; // 实现背景随元素大小而改变
    background-clip: padding-box, border-box; // 实色背景为padding-box让其不要覆盖到border
    background-origin: border-box; // 如默认padding-box会使下层图片背景出现重复
    width: 21em;
    padding: 1em;
    overflow: hidden;
    resize: both; // 元素右下角拖动改变元素大小
}
</code></pre><p>使用<code>border-image</code>无法实现边框图片随元素的宽高变化而自动变化（<code>border-image</code>本质是图形复制），这里利用多层背景，底层背景加载图片，上层白色背景利用渐变的实色效果实现。</p>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2019/10/07/nginx/" rel="next" title="nginx教程学习">
                <i class="fa fa-chevron-left"></i> nginx教程学习
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2019/10/07/js-if-else/" rel="prev" title="重构大量if...else">
                重构大量if...else <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
    </div>
  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">renhao</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">94</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">19</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#过渡"><span class="nav-number">1.</span> <span class="nav-text">过渡</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#动画"><span class="nav-number">2.</span> <span class="nav-text">动画</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#形状转换"><span class="nav-number">3.</span> <span class="nav-text">形状转换</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#选择器"><span class="nav-number">4.</span> <span class="nav-text">选择器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#阴影"><span class="nav-number">5.</span> <span class="nav-text">阴影</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#边框"><span class="nav-number">6.</span> <span class="nav-text">边框</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#背景"><span class="nav-number">7.</span> <span class="nav-text">背景</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">renhao</span>

  
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    
      <span class="post-meta-item-text">Site words total count&#58;</span>
    
    <span title="Site words total count">265.9k</span>
  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  










  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
  
  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item=>{
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        el: '#comments' ,
        verify: false,
        notify: false,
        appId: '2P1xqUWiCoNm14MH4yhURlJi-gzGzoHsz',
        appKey: 'uJN0uagHIVgXtBO1OuLV9Ban',
        placeholder: 'Just go go',
        avatar:'mm',
        guest_info:guest,
        pageSize:'10' || 10,
    });
  </script>



  





  

  

  

  
  

  

  

  

</body>
</html>
